{% extends "base.html" %}
{% load staticfiles %}
{% load user_tags %}

{% block title %}
    其他用户主页
{% endblock %}

{% block main_content %}
<div class="container person">
  <div class="row">
    <div class="col-xs-12 col-sm-9 main">
      <!-- 用户title部分导航 -->
      <div class="main-top">
        <a class="avatar" href="{{ user_other.get_absolute_url }}"> <img src="{{ MEDIA_URL }}{{ user_other.avatar }}" alt="avatar"> </a>
        {% check_is_following_user request user_other as is_following %}
        <a class="btn {% if is_following %}btn-round btn-default{% else %}btn-teal btn-circular{% endif %} pull-right m-t-23 m-l-10"
           id="attenttouser_{{ user_other.id }}"
           data-login="{% if not request.user.is_authenticated %}un{% endif %}login"
           data-action="{% if is_following %}un{% endif %}follow"
           onclick="attentto_user({{ user_other.id }})">
           {% if is_following %}
               <i class="fa fa-check"></i><span> 已关注</span>
           {% else %}
               <i class="fa fa-plus"></i><span> 关注</span>
           {% endif %}
        </a>
        <a class="btn btn-teal btn-round btn-outline m-t-23 pull-right" href="{% url 'private_messages:pm_chat' user_other.id %}">私信 TA</a>
        <div class="title"> <a class="name" href="{{ user_other.get_absolute_url }}">
            {{ user_other }}
            <span>
                <i class="fa  {% ifequal 'female' user_default.gender %}fa-venus text-danger{% else %}fa-mars text-info{% endifequal %}" aria-hidden="true"></i>
            </span>
        </a> </div>
        <div class="info">
          <ul>
            <li>
              <div class="meta-block">
                <a href="{{ user_other.get_article_list }}">
                  <p>{{ user_other.articles.count }}</p> 文章 <i class="fa fa-angle-right"></i>
                </a>
              </div>
            </li>
            <li>
              <div class="meta-block">
                <a href="{{ user_other.get_follower_list }}">
                  <p>{{ user_other.followers_user.count }}</p> 粉丝 <i class="fa fa-angle-right"></i>
                </a>
              </div>
            </li>
{#            <li>#}
{#              <div class="meta-block">#}
{#                <p>53472</p>#}
{#                <div>字数</div>#}
{#              </div>#}
{#            </li>#}
{#            <li>#}
{#              <div class="meta-block">#}
{#                <p>264</p>#}
{#                <div>收获喜欢</div>#}
{#              </div>#}
{#            </li>#}
          </ul>
        </div>
      </div>
     <!--标签页-->
      <ul class="trigger-menu nav nav-tabs" role="tablist" data-pjax-container="#list-container">
        <li role="presentation" class="active">
            <a href="#articlestab" aria-controls="articlestab" role="tab" data-toggle="tab">
            <i class="fa fa-file-text"></i> 文章
            </a>
        </li>
        <li role="presentation">
            <a href="#activitytab" aria-controls="activitytab" role="tab" data-toggle="tab">
                <i class="fa fa-bell-o"></i> 最新动态
            </a>
        </li>
        <li role="presentation">
            <a href="#commentstab" aria-controls="commentstab" role="tab" data-toggle="tab">
                <i class="fa fa-commenting-o"></i> 最新评论
            </a>
        </li>
      </ul>
       <!-- 标签面板-->
      <div class="tab-content" id="list-container">
        <div role="tabpanel" class="tab-pane fade in active" id="articlestab">
        <!-- 用户部分文章列表 -->
        <ul class="note-list" >
          {% for article in articles %}
          <li id="note-{{ article.id }}" data-note-id="{{ article.id }}" class="have-img">
            {% if article.cover_picture %}
            <a class="wrap-img" href="{{ article.get_absolute_url }}" target="_blank">
              <img src="{{ MEDIA_URL }}{{ article.cover_picture }}">
            </a>
            {% endif %}
            <div class="content">
              <div class="author">
                <a class="avatar" target="_blank" href="{{ article.author.get_absolute_url }}">
                    <img src="{{ MEDIA_URL }}{{ article.author.avatar }}" alt="96">
                </a>
                <div class="name">
                  <a class="blue-link" target="_blank" href="{{ article.author.get_absolute_url }}">
                      {{ article.author }}
                  </a>
                  <span class="time">{{ article.created }}</span>
                </div>
              </div>
              <a class="title" target="_blank"  href="{{ article.get_absolute_url }}">{{ article.title }}</a>
              <p class="abstract">{{ article.summary }}...</p>
              <div class="meta">

{#                <a target="_blank" href="{{ article.author.get_absolute_url }}">#}
{#                    {{ article.author }}#}
{#                </a>#}
                <a target="_blank" href="{{ article.get_absolute_url }}"> <i class="fa fa-eye"></i> {{ article.view_count }} </a>
                <a target="_blank" href="{{ article.get_absolute_url }}#comments"> <i class="fa fa-comment-o"></i> {{ article.comments.count }} </a>
                <span><i class="fa fa-heart-o"></i> {{ article.total_like }}</span>
              </div>
            </div>
          </li>
          {% endfor %}
        </ul>
        <!--阅读更多-->
        <a target="_blank" href="{{ user_other.get_article_list }}" class="btn btn-block btn-default">阅读更多</a>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="activitytab">
        <!-- 用户部分动态列表模块 -->
        <ul class="note-list" >
          {% include 'public-actions-list-ajax.html' %}
        </ul>
        <!--阅读更多-->
        <a target="_blank" href="{{ user_other.get_action_list }}" class="btn btn-block btn-default">阅读更多</a>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="commentstab">
         <!-- 用户部分评论列表模块 -->
        <ul class="note-list" >
          {% for comment in comments %}
          <li id="note-3" data-note-id="3">
            <div class="content">
              <div class="author">
{#                <a class="avatar" href="{{ user_default.get_absolute_url }}"> <img src="{{ MEDIA_URL }}{{ user_default.avatar }}" alt="avatar"> </a>#}
                 <cite>
                <span> 来自 </span>
                <div class="name">
                      <a href="{{ comment.user.get_absolute_url }}">
                        {{ comment.user }}
                      </a>
                      <span>{{ comment.created }}</span>
                </div>
                </cite>
              </div>
                <p class="comment">{{ comment.content }}</p>
              <blockquote>
                <a class="title" href="{{ comment.article.get_absolute_url }}"> {{ comment.article.title }} </a>
                <p class="abstract">{{ comment.article.summary }}...</p>
                <div class="meta">
                  <a target="_blank" href="{{ comment.article.author.get_absolute_url }}" class="text-teal">
                      {{ comment.article.author }}
                  </a>
                  <a target="_blank" href="{{ comment.article.get_absolute_url }}"> <i class="fa fa-eye"></i> {{ comment.article.view_count }} </a>
                  <a target="_blank" href="{{ comment.article.get_absolute_url }}#comments"> <i class="fa fa-comment-o"></i> {{ comment.article.comments.count }} </a>
                  <span><i class=" fa fa-heart-o"></i> {{ comment.article.total_like }}</span>
                </div>
              </blockquote>
            </div>
          </li>
          {% endfor %}
        </ul>
        <!--阅读更多-->
        <a target="_blank" href="{{ user_other.get_comment_list }}" class="btn btn-block btn-default">阅读更多</a>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-3 aside">
      <div class="title">个性签名</div>
      <div class="description">
        <div class="js-intro"> {{ user_other.signature }} </div>
      </div>
      <div class="title">TA的关注</div>
      <ul class="list user-dynamic">
          <li> <a href="{{ user_other.get_following_user_list }}"> <i class="fa fa-user-circle-o"></i> <span>TA 关注的作者</span> </a> </li>
          <li> <a href="{{ user_other.get_following_topic_list }}"> <i class="fa fa-lemon-o"></i> <span>TA 关注的专题</span> </a> </li>

{#        <li> <a href="#"> <i class="fa fa-heart-o"></i> <span>TA喜欢的文章</span> </a> </li>#}
      </ul>
{#      <div>#}
{#        <div class="title">他的文集</div>#}
{#        <ul class="list">#}
{#          <li>#}
{#            <a href="#" target="_blank"><i class="fa fa-book"></i></a>#}
{#            <a href="#" target="_blank" class="name">网站页面设计</a>#}
{#          </li>#}
{#          <li>#}
{#            <a href="#" target="_blank"><i class="fa fa-book"></i></a>#}
{#            <a href="#" target="_blank" class="name">APP</a>#}
{#          </li>#}
{#          <li>#}
{#            <a href="#" target="_blank"><i class="fa fa-book"></i></a>#}
{#            <a href="#" target="_blank" class="name">色彩</a>#}
{#          </li>#}
{#        </ul>#}
{#      </div>#}
    </div>
  </div>
</div>
{% endblock %}


